<template>
    <teleport :to='teleport' v-if="show">
        <div class="dailogShade" @click="onclick">
            <div class="dgMainBox animated fadeInDown" :style="{'max-height':maxHeight,width,height}">
                <div class="dg-header"><slot name="header"/></div>
                <div class="dg-main"><slot/></div>
                <div class="dg-footer"><slot name="footer"/></div>
            </div>
        </div>
    </teleport>
</template>

<script>
export default {
    props:{
        show:Boolean,
        closeOnClickOverlay:{  // 点击遮罩层是否关闭弹窗
            type:Boolean,
            default:false
        },
        teleport:{
            type:String,
            default:()=>'body'
        },
        width:{
            type:String,
            default:'85%'
        },
        height:{
            type:String
        },
        maxHeight:{
            type:String
        }
    },
    setup(props,context) {

        const close = ()=>{
           context.emit('update:show', false)
        }

        const onclick = ()=>{
            props.closeOnClickOverlay && close()
        }

        return{
            close,
            onclick
        }
    },
}
</script>

<style lang="scss" scoped>
    .dailogShade{
        display: flex;
        justify-content: center; 
        align-items: center;    
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
        .dgMainBox{
            display: flex;
            flex-flow: column;
            width: 80%;
            min-height: 100px;
            max-height: 90%;
            background: #0E6161;
            border: 2px solid var(--baseColor);
            padding: 30px;
            .dg-main{
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }

    // ---animated---------------------
    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            transform: translateY(-20px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0)
        }
    }
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown
    }
</style>